<template>
  <div class="bg-logo">
    <div class="bg">
      <div class="choose" v-if="!isCalling">
        <template v-if="type === 'call'">
          <div class="title">呼叫{{to}}中</div>
          <div class="btn">
            <div @click="handleCloseRoom" class="close">
              <image src="/static/images/close.png" class="operation"/>
            </div>
          </div>
        </template>
        <template v-if="type === 'onCall'">
          <div class="title">{{from}}正在呼叫</div>
          <div class="btn">
            <div @click="receive" class="close answer">
              <image src="/static/images/call.png" class="operation"/>
            </div>
            <div @click="handleRefuse" class="close">
              <image src="/static/images/close.png" class="operation"/>
            </div>
          </div>
        </template>
      </div>
      <div class="call" :style="isCalling ? {'display': 'flex', 'height': '100vh', 'width': '100vw'} : {'display': 'none'}">
        <div class="room">
          <webrtc-room
            id="webrtcroom"
            :autoplay="true"
            :enableCamera="true"
            :roomID="roomID"
            :userID="userID"
            :userSig="userSig"
            :sdkAppID="sdkAppID"
            :beauty="beauty"
            :muted="muted"
            @RoomEvent="onRoomEvent"
            smallViewLeft="calc(100vw - 30vw - 2vw)"
            smallViewTop="20vw"
            smallViewWidth="30vw"
            smallViewHeight="30vh">
          </webrtc-room>
          <div class="panel">
            <div class="close-btn">
              <div @click="microphone" class="normal">
                <image v-if="!muted" src="/static/images/voice.png" class="operation"/>
                <image v-else src="/static/images/voice-muted.png" class="operation"/>
              </div>
              <div @click="handleCloseRoom" class="close">
                <image src="/static/images/close.png" class="operation"/>
              </div>
              <div @click="monitor" class="normal">
                <image src="/static/images/monitor.png" class="operation"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TYPES from '../../utils/types'
import { genTestUserSig } from '../../../static/utils/GenerateTestUserSig'
const ERROR_OPEN_CAMERA = -4 // 打开摄像头失败
const ERROR_OPEN_MIC = -5 // 打开麦克风失败
const ERROR_PUSH_DISCONNECT = -6 // 推流连接断开
const ERROR_CAMERA_MIC_PERMISSION = -7 // 获取不到摄像头或者麦克风权限
const ERROR_EXCEEDS_THE_MAX_MEMBER = -8 // 超过最大成员数
const ERROR_REQUEST_ROOM_SIG = -9 // 获取房间SIG错误
const ERROR_JOIN_ROOM = -10 // 进房失败
export default {
  data () {
    return {
      args: {},
      closeFlag: false,
      refuseFlag: false,
      isPending: true,
      isCalling: false,
      frontCamera: false,
      beauty: 0,
      muted: false,
      timeStamp: 0,
      sdkAppID: 0,
      userSig: '',
      userID: '',
      roomID: 0,
      type: '',
      from: '',
      to: '',
      timeoutId: '',
      startTime: 0
    }
  },
  onShow () {
    // 初始化参数
    const loginOptions = genTestUserSig(this.userID)
    this.userSig = loginOptions.userSig
    this.sdkAppID = loginOptions.sdkappid
    this.isCalling = false
    this.isPending = true
    console.log(this.type)
    if (this.userID === this.from) {
      this.timeoutId = setTimeout(() => {
        this.timeout()
      }, 60000)
    }
    wx.setKeepScreenOn({
      keepScreenOn: true
    })
    this.$store.commit('setCalling', true)
  },
  onUnload () {
    if (!(this.refuseFlag || this.closeFlag)) {
      if (this.isCalling) {
        this.closeRoom()
      } else {
        if (this.type === 'call') {
          this.closeRoom()
        } else {
          this.refuse()
        }
      }
    }
    this.refuseFlag = false
    this.closeFlag = false
    this.isCalling = false
    this.isPending = false
    clearTimeout(this.timeoutId)
    this.$store.commit('setCalling', false)
  },
  onHide () {
    this.isCalling = false
    this.isPending = false
    clearTimeout(this.timeoutId)
    this.closeRoom()
    this.$store.commit('setCalling', false)
    // 清理掉监听
    this.$bus.$off('onCall')
    this.$bus.$off('isCalling')
    this.$bus.$off('onClose')
    this.$bus.$off('onRefuse')
    this.$bus.$off('onBusy')
  },
  onLoad (options) {
    console.log(options)
    this.args = JSON.parse(options.args)
    this.userID = this.$store.getters.myInfo.userID
    this.from = options.from
    this.to = options.to
    this.type = (this.userID === this.from) ? 'call' : 'onCall'
    this.roomID = this.args.room_id
    this.$bus.$on('onCall', () => {
      this.isCalling = true
      this.isPending = false
      this.startTime = new Date().getTime()
      clearTimeout(this.timeoutId)
      this.onCall()
    })
    this.$bus.$on('isCalling', (message) => {
      this.alreadyCalling(message)
    })
    this.$bus.$on('onClose', () => {
      this.closeFlag = true
      wx.navigateBack({
        delta: 1
      })
    })
    this.$bus.$on('onRefuse', () => {
      this.closeFlag = true
      wx.navigateBack({
        delta: 1
      })
    })
    this.$bus.$on('onBusy', () => {
      this.closeFlag = true
      wx.navigateBack({
        delta: 1
      })
    })
  },
  methods: {
    onRoomEvent (e) {
      if ([ERROR_OPEN_CAMERA,
        ERROR_OPEN_MIC,
        ERROR_PUSH_DISCONNECT,
        ERROR_CAMERA_MIC_PERMISSION,
        ERROR_EXCEEDS_THE_MAX_MEMBER,
        ERROR_REQUEST_ROOM_SIG,
        ERROR_JOIN_ROOM].includes(e.target.code)) {
        this.webrtcroomComponent = this.$mp.page.selectComponent('#webrtcroom')
        this.webrtcroomComponent.stop()
        this.args.action = -2
        this.args.code = e.target.code
        const data = JSON.stringify(this.args)
        // 对方发起视频，接通成功后如果是我挂断的，这时挂断消息应该发给视频发起方
        let to = (this.to === this.$store.getters.myInfo.userID) ? this.from : this.to
        const message = wx.$app.createCustomMessage({
          to: to,
          conversationType: TYPES.CONV_C2C,
          payload: {
            data: data,
            description: '',
            extension: ''
          }
        })
        this.$store.commit('sendMessage', message)
        wx.$app.sendMessage(message)
        clearTimeout(this.timeoutId)
      }
      if (e.target.tag === 'error') {
        wx.showToast({
          title: e.target.detail,
          duration: 1000
        })
      }
    },
    handleCloseRoom () {
      this.closeFlag = true
      this.closeRoom()
      wx.navigateBack({
        delta: 1
      })
    },
    handleRefuse () {
      this.refuseFlag = true
      this.refuse()
      wx.navigateBack({
        delta: 1
      })
    },
    // 发起方等待时挂断
    closeRoom () {
      this.webrtcroomComponent = this.$mp.page.selectComponent('#webrtcroom')
      this.webrtcroomComponent.stop()
      this.args.action = 5
      if (this.startTime === 0) {
        this.args.action = 1
      }
      if (this.startTime !== 0) {
        const endTime = new Date().getTime()
        this.args.duration = Math.round((endTime - this.startTime) / 1000)
        this.startTime = 0
      }
      const data = JSON.stringify(this.args)
      // 对方发起视频，接通成功后如果是我挂断的，这时挂断消息应该发给视频发起方
      let to = (this.to === this.$store.getters.myInfo.userID) ? this.from : this.to
      const message = wx.$app.createCustomMessage({
        to: to,
        conversationType: TYPES.CONV_C2C,
        payload: {
          data: data,
          description: '',
          extension: ''
        }
      })
      this.$store.commit('sendMessage', message)
      wx.$app.sendMessage(message)
      clearTimeout(this.timeoutId)
    },
    // 发起方等待接收方超过60s
    timeout () {
      this.args.action = 3
      const data = JSON.stringify(this.args)
      const message = wx.$app.createCustomMessage({
        to: this.to,
        conversationType: TYPES.CONV_C2C,
        payload: {
          data: data,
          description: '',
          extension: ''
        }
      })
      this.$store.commit('sendMessage', message)
      wx.$app.sendMessage(message)
      wx.navigateBack({
        delta: 1
      })
    },
    // 接受对方的请求
    receive () {
      this.args.action = 4
      const data = JSON.stringify(this.args)
      this.startTime = new Date().getTime()
      const message = wx.$app.createCustomMessage({
        to: this.from,
        conversationType: TYPES.CONV_C2C,
        payload: {
          data: data,
          description: '',
          extension: ''
        }
      })
      this.$store.commit('sendMessage', message)
      wx.$app.sendMessage(message)
      clearTimeout(this.timeoutId)
      this.isCalling = true
      this.isPending = false
      this.webrtcroomComponent = this.$mp.page.selectComponent('#webrtcroom')
      this.webrtcroomComponent.start()
    },
    onCall () {
      this.webrtcroomComponent = this.$mp.page.selectComponent('#webrtcroom')
      this.webrtcroomComponent.start()
    },
    // 拒绝
    refuse () {
      this.args.action = 2
      const data = JSON.stringify(this.args)
      const message = wx.$app.createCustomMessage({
        to: this.from,
        conversationType: TYPES.CONV_C2C,
        payload: {
          data: data,
          description: '',
          extension: ''
        }
      })
      this.$store.commit('sendMessage', message)
      this.$store.commit('setCalling', false)
      wx.$app.sendMessage(message)
      clearTimeout(this.timeoutId)
    },
    alreadyCalling (item) {
      const options = JSON.parse(item.payload.data)
      options.action = 6
      const message = wx.$app.createCustomMessage({
        to: item.from,
        conversationType: TYPES.CONV_C2C,
        payload: {
          data: JSON.stringify(options),
          description: '',
          extension: ''
        }
      })
      this.$store.commit('sendMessage', message)
      wx.$app.sendMessage(message)
    },
    microphone () {
      this.muted = !this.muted
    },
    monitor () {
      this.webrtcroomComponent = this.$mp.page.selectComponent('#webrtcroom')
      this.webrtcroomComponent.switchCamera()
    }
  },
  destory () {}
}
</script>

<style lang='stylus' scoped>
.bg-logo
  background center / contain no-repeat url("")
.bg
  background-color rgba(0, 0, 0, 0.8)
  .choose
    display flex
    flex-direction column
    width 100vw
    height 100vh
.title
  height 70vh
  display flex
  align-items center
  justify-content center
  color white
  font-size 32px
  font-weight 700
.btn
  height 30vh
  width 100vw
  justify-content space-around
  display flex
.close
  background-color $danger
  height 50px
  width 50px
  padding 12px
  box-sizing border-box
  border-radius 50%
.answer
  background-color $success
.call
  display flex
  position relative
.close-btn
  z-index 999
  display flex
  width 100vw
  justify-content space-around
  box-sizing border-box
.time
  height 8vh
  width 100vw
  text-align center
  padding-top 30px
  color white
.panel
  z-index 999
  display flex
  width 100vw
  bottom 20px
  flex-direction column
  box-sizing border-box
  position absolute
.room
  position relative
  height 100vh
  width 100vw
.operation
  width 100%
  height 100%
.normal
  background-color transparent
  height 50px
  width 50px
  padding 10px
  box-sizing border-box
  border 2px solid white
  border-radius 50%
</style>
